<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
    <div class="min-h-screen flex">
        <!-- 左侧品牌展示区 -->
        <div class="hidden lg:flex lg:w-1/2  relative overflow-hidden">
            <div class="absolute inset-0">
                <img src="./img/bg.jpg" class="object-cover w-full h-full " alt="背景图"/>
                <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
            </div>

            <div class="relative z-10 flex flex-col items-center justify-center w-full p-12 text-white">
<!--                <img src="https://ai-public.mastergo.com/ai/img_res/af967e6b4be5655a35947c6dce2df189.jpg" class="w-32 h-32 mb-8" alt="Logo"/>-->
                <h1 class="text-4xl font-bold mb-4">暴涨网球后台</h1>
     、
            </div>
        </div>

        <!-- 右侧登录区 -->
        <div class="w-full lg:w-1/2 flex items-center justify-center p-8 bg-white">
            <div class="w-full max-w-md">

                <div class="text-center mb-10">
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">欢迎回来</h2>
                    <p class="text-gray-600">登录您的暴涨网球后台</p>
                </div>

                <el-form ref="formRef" :model="formData" :rules="rules" class="space-y-6">
                    <el-form-item prop="username">
                        <el-input v-model="formData.username" placeholder="请输入用户账号" size="large">
                            <template #prefix>
                                <el-icon>
                                    <User/>
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="formData.password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" size="large">
                            <template #prefix>
                                <el-icon>
                                    <Lock/>
                                </el-icon>
                            </template>
                            <template #suffix>
                                <el-icon class="cursor-pointer" @click="showPassword = !showPassword">
                                    <View v-if="showPassword"/>
                                    <Hide v-else/>
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="captchaInput">
                        <el-input v-model="formData.captchaInput" placeholder="请输入验证码" size="large">
                            <template #prefix>
                                <el-icon>
                                    <Notification/>
                                </el-icon>
                            </template>
                            <template #suffix>
                                <div class="cursor-pointer" v-html="captchaSvg" @click="getCaptcha" style="display:flex;align-items:center;justify-content:center;"></div>
                            </template>
                        </el-input>
                    </el-form-item>

<!--                    <div class="flex items-center justify-between">-->
<!--                        <el-checkbox v-model="remember" class="text-gray-600">记住我</el-checkbox>-->
<!--                        <a href="#" class="text-blue-600 hover:text-blue-800 text-sm">忘记密码？</a>-->
<!--                    </div>-->

                    <el-button type="primary" class="w-full !rounded-button" :loading="loading" size="large" @click="handleLogin">登 录</el-button>

                    <!--                    <div class="text-center mt-6">-->
                    <!--                        <p class="text-gray-600">-->
                    <!--                            还没有账号？-->
                    <!--                            <a href="#" class="text-blue-600 hover:text-blue-800">立即注册</a>-->
                    <!--                        </p>-->
                    <!--                    </div>-->
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Hide, Lock, User, View } from '@element-plus/icons-vue'
import userApi from 'api/model/user.js'
import authApi from '@/api/model/auth.js'

import { useUserStore } from '@/stores/user.js'
import { ElMessage, ElNotification } from 'element-plus'

const router = useRouter()
const route = useRoute()
const redirectTo = route.query.redirect || '/' // 默认首页

const store = useUserStore()

const showPassword = ref(false)
const loading = ref(false)
const remember = ref(true)

const formData = reactive({
    username: '',
    password: '',
    captchaInput: '',
    captchaKey: 'gw_',
})

const formRef = ref()

const rules = reactive({
    username: [
        { required: true, message: '请输入用户账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入用户密码', trigger: 'blur' },
    ],
    captchaInput: [
        { required: true, message: '请输入用验证码', trigger: 'blur' },
    ],
})

/**
 * 处理登录
 */
const handleLogin = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            setTimeout(() => {
                loading.value = false
            }, 8000)
            executeLogin()
        } else {
            console.log('表单验证失败')
        }
    })
}

// login 登录接口
async function executeLogin () {
    try {
        const { code, data, msg } = await authApi.loginAdmin.post(formData)
        if (code === 200) {
            ElNotification({
                title: '登录成功',
                message: '欢迎回来',
                type: 'success',
            })
            const { token, userInfo } = data
            localStorage.setItem('token', token)
            router.replace(redirectTo)
            loading.value = false
        }
    } catch (error) {
        loading.value = false
        getCaptcha()
    }
}

/**
 * 获取验证码
 */
const captchaSvg = ref('')

async function getCaptcha () {
    const { code, data } = await authApi.captcha.get({
        key: formData.captchaKey,
    })
    if (code === 200) {
        const { captcha_svg, captcha_id } = data || {}
        formData.captcha_id = captcha_id
        captchaSvg.value = captcha_svg
    }
}

onMounted(() => {
    getCaptcha()
})


</script>

<style scoped lang="less">


:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409eff inset;
}

:deep(.el-input__wrapper.is-invalid) {
    box-shadow: 0 0 0 1px #ff4949 inset;
}

:deep(.el-button--primary) {
    background-color: #007AFF;
    border-color: #007AFF;
}

:deep(.el-button--primary:hover) {
    background-color: #0056b3;
    border-color: #0056b3;
}

:deep(.el-input) {
    height: 46px;
    background-size: 100% 100%;
    .el-input-group__prepend,
    .el-input__inner,
    .el-input__inner:hover,
    .el-input__inner:focus {
        background-color: transparent !important;
        border-width: 0;
    }
    // 解决回填后带背景色问题
    .el-input__inner:-webkit-autofill,
    .el-input__inner:-webkit-autofill:hover,
    .el-input__inner:-webkit-autofill:focus,
    .el-input__inner:-webkit-autofill:active {
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out,
        background-color 99999s ease-out;
    }
    input {
        height: 46px;
        box-shadow: inset 0 0 0 1000px transparent !important;
        color: #333;
    }

}


</style>

